import styled from "styled-components";

export const Container = styled.div`
    .keep{
        width: 100vw;
        height: 0.2rem;
        background-color: #fefffe;
        position: relative;
    }
    .title {
        height: 1rem;
        /* background-color: grey; */
        width: 100vw;
        display: flex;
        align-items: center;
        flex-direction: row;
        position: relative;
        padding-top:0.2rem;
            .title-img{
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            /* padding-left: -2.3rem; */
            margin-left: 0.34rem;
            }
            .title-content{
                font-size: 0.2rem;
                color: black;
                padding-left: 0.3rem;
                .tit-con-top{
                    font-size: 14px;
                    font-weight: 500;
                    color: #595959;
                    font-family: microsoft YaHei;
                }
                .tit-con-bottom{
                    .typef{
                    color:#8c8c8c;
                    font-size: 12px;
                    transform: scale(0.83);
                    font-family: microsoft YaHei;
                    font-weight: 600;
                    }
                    .typer{
                    color:#000;
                    font-size:12px;
                    font-family: microsoft YaHei;
                    font-weight: 600;
                    }
                    display: flex;
                    flex-direction: row;
                    
                }
            }
            .title-bottom{
                
                position: absolute;
                height: 100%;
                width: 2rem;
                line-height:1rem;
                left: 8.3rem;
                padding-bottom: 0.2rem;
            }
        
    }
    .middle{
        display: flex;
        width: 100vw;
        /* background-color: green; */
        align-items: center;
        .middle-title{
            height: 0.8rem;
            line-height:1rem;
            font-size: 16px;
            font-family: microsoft YaHei;
            font-weight: 500;
            padding: 2px;
            padding-left: 10px;
            color: black;
        }
    }

    .commentLight{
        /* height: 4rem; */
        width: 9rem;
        margin-left: 0.5rem;
        background-color: #f5f5f5;
        box-sizing: border-box;
        padding: 0.2rem;
        padding-top: 0.6rem;
        border-radius: 6px;
        position: relative;
        .light{
            font-size: 12px;
            color: #f0b544;
            font-family: Microsoft YaHei;
            font-weight: 600;
            position: absolute;
            top: 12px;
            left: 12px;
        }
        .commentmost{
            font-size: 14px;
            margin-top: 0.2rem;
            font-family: Microsoft YaHei;
            
            border: 0.2rem;
            /* 两行省略 */
            word-break: break-all;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .commentimg{
            width: 1.5rem;
            height: 1.5rem;
            object-fit: cover;
            border-radius: 3px;
        }
    }
    .bottom{
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 0.9rem;
        position: relative;
        /* background-color: red; */
        .sum{
            color: #989ba0;
            display: inline;
            font-size: 12px;
            line-height: 24px;
            position: absolute;
            top: 5px;
            font-family: microsoft YaHei;
            font-weight: 600;
        }
        
    }
    
`
